<template>
  <component is="a-modal" v-model:visible="visible" :width="600" :title="title" :footer="false">
    <!-- 表单信息 start -->
    <a-descriptions :column="1" bordered class="pb-4">
      <a-descriptions-item label="交易用户">{{ formData.user?.account }}</a-descriptions-item>
      <a-descriptions-item label="订单编号">{{ formData.order_sn }}</a-descriptions-item>
      <a-descriptions-item label="订单状态"><sa-dict :value="formData.status" dict="pay_status" /></a-descriptions-item>
      <a-descriptions-item label="订单类型"><sa-dict :value="formData.type" dict="bill_type" /></a-descriptions-item>
      <a-descriptions-item label="订单金额">￥{{ formData.money }}</a-descriptions-item>
      <a-descriptions-item label="订单描述">{{ formData.message }}</a-descriptions-item>
      <a-descriptions-item label="交易单号">{{ formData.transaction_id }}</a-descriptions-item>
    </a-descriptions>
    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['success'])
// 引用定义
const visible = ref(false)
const formRef = ref()
const mode = ref('')

let title = computed(() => {
  return '支付订单-详情'
})

// 表单信息
const formData = ref({})

// 打开弹框
const open = async (type = 'add') => {
  mode.value = type
  visible.value = true
  await initPage()
}

// 初始化页面数据
const initPage = async () => {}

// 设置数据
const setFormData = async (data) => {
  formData.value = data
}

defineExpose({ open, setFormData })
</script>
